<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加菜单</el-button>
            </el-form-item>
            <el-form-item label="关键词：" prop="keyword">
              <el-input v-model="queryParams.keyword" placeholder="请输入菜单名称,路径，标题..." maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="启用状态" prop="status">
              <el-select v-model="queryParams.status" class="m-2" placeholder="请选择启用状态" clearable>
                <el-option
                    v-for="item in [{value:1,label:'显示中'},{value:0,label:'已隐藏'}]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click.prevent="handleSearch">搜索</el-button>
              <el-button type="danger" icon="Refresh" @click.prevent="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
            v-loading="tableLoading"
            :data="tableData"
            row-key="id"
            default-expand-all
            stripe border :height="settings.tableHeight()">
          <el-table-column fixed prop="id" label="ID" align="center" width="80"  />
          <el-table-column fixed prop="parentId" label="父ID" align="center" width="80" />
          <el-table-column prop="title" label="菜单标题" align="center" >
            <template #default="{row}">
              <el-input v-model="row.title" style="text-align:center" @change="handleChange(row,'title')"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="菜单编号" align="center" />
          <el-table-column prop="path" label="菜单路径" align="center" />
          <el-table-column prop="sort" label="排序"  align="center" width="180">
            <template #default="{row}">
              <el-input-number v-model="row.sort" @change="handleChange(row,'sort')"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="是否启用" align="center" width="180">
            <template #default="{row}">
              <el-switch
                  v-model="row.status"
                  @change="handleChange(row,'status')"
                  active-color="#4caf50"
                  active-text="启用中"
                  inactive-text="禁止中"
                  :active-value="1"
                  :inactive-value="0"/>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="160">
            <template #default="scope">
              {{ formatTimeToStr(scope.row.createTime,"yyyy/MM/dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间" align="center" width="160">
            <template #default="scope">
              {{ formatTimeToStr(scope.row.updateTime,"yyyy/MM/dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="left" label="操作" width="320">
            <template #default="{row,$index}">
              <el-button  icon="plus" v-if="row.parentId == 0 " @click="handleAddChild(row)"  type="success">添加子菜单</el-button>
              <el-button  icon="edit" @click="handleEdit(row)"  type="primary">编辑</el-button>
              <el-button  icon="remove" @click="handleDel(row)"  type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </home-page-header>
    </div>
    <add-menus ref="addRef" @load="handleSearch"></add-menus>
  </div>
</template>

<script  setup>
import KVA from '@/utils/kva.js'
import settings from '@/settings';
import { formatTimeToStr } from '@/utils/date'
import AddMenus from '@/views/sys/components/AddMenus.vue'
import { findPages,updateStatus,delById } from '@/api/sysapis.js';
import { reactive } from 'vue';
import { useUserStore } from '@/stores/users.js'
const userStore = useUserStore()
const addRef = ref(null);

// 搜索属性定义
let queryParams = reactive({
  keyword:"",
  status:""
})

// 数据容器
const tableData = ref([])
const searchForm = ref(null)
// 搜索
const handleSearch = ()=> {
  handleLoadData()
}

// 查询列表
const handleLoadData = async ()=>{
  const resp = await findPages(queryParams)
  tableData.value = resp.data
}

// 添加
const handleAdd = ()=>{
  addRef.value.handleOpen('','save',tableData.value?.length)
}

// 编辑
const handleEdit =  async (row) => {
  // 在打开,再查询，
  addRef.value.handleOpen(row.id,'edit',tableData.value?.length)
}

// 添加子菜单
const handleAddChild = (row) => {
  addRef.value.handleOpen(row.id,'child',row.children?.length)
}


// 删除单个
const handleDel =  async (row) => {
  KVA.confirm("警告", "<strong>您确定要执行此次操作吗？</strong>", { icon: "success" }).then(async() => {
    const opid = row.id
    await delById(opid)
    KVA.notifySuccess("删除成功!")
    handleLoadData()
  })
}

// 重置搜索表单
const handleReset = () => {
  queryParams.keyword = ""
  searchForm.value.resetFields()
  handleLoadData()
}
// 改变序号
const handleChange = async (row,field) =>{
  var value = row[field];
  await updateStatus(row.id,field,value)
  KVA.notifySuccess("操作成功")
  if(field=="sort"){
    tableData.value.sort((a,b)=>a.sort-b.sort);
  }
}

// 生命周期加载
onMounted(()=>{
  handleLoadData()
})


</script>